<template>
	<view>
		<form @submit="formSubmit">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>收货人姓名</view>
						<input type='text' placeholder='请填写收货人姓名' name='real_name'
							placeholder-class='placeholder' v-model='userInfo.real_name'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>收货人电话</view>
						<input type='text' placeholder='请填写收货人电话'  name='phone'
							placeholder-class='placeholder' v-model='userInfo.phone'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>收货省份</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_province" range-key="regionName"
								:range="provinceList">
								<view class='acea-row'>
									<view class="picker" v-if="provinceIndex==null" style="color:#ccc;">请选择收货地区省份</view>
									<view class="picker" v-if="provinceIndex!==null">
										{{provinceList[provinceIndex].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>收货城市</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_city" range-key="regionName"
								:range="cityList">
								<view class='acea-row'>
									<view class="picker" v-if="cityIndex==null" style="color:#ccc;">请选择收货市</view>
									<view class="picker" v-if="cityIndex!==null">{{cityList[cityIndex].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>收货区县</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_county" range-key="regionName"
								:range="countyList">
								<view class='acea-row'>
									<view class="picker" v-if="countyIndex==null" style="color:#ccc;">请选择收货区县</view>
									<view class="picker" v-if="countyIndex!==null">
										{{countyList[countyIndex].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>详细地址</view>
						<input type='text' placeholder='请填写详细地址' name='detail' placeholder-class='placeholder'
							v-model='userInfo.detail'></input>
					</view>
				</view>
				<button class='keepBnt bg-color' form-type="submit">立即保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	import home from '@/components/home';
	import {
		getMemberInfo,
		getRegionListByParentId,
		shippingAddressSubmit
	} from '@/api/directSelling.js'
	export default {
		components: {
			home,
		},
		data() {
			return {
				userInfo: {
					detail: "",
					real_name:"",
					phone:""
				},
				provinceList: [],
				cityList: [],
				countyList: [],
				provinceIndex: null,
				cityIndex: null,
				countyIndex: null,
				provinceId: null,
				cityId: null,
				countyId: null,
				saleType:null
			};
		},
		onLoad(options) {
			this.saleType=options.saleType;
			this.getProvinceList(1, 'province');
			this.getUserData();
		},
		methods: {
			getUserData() {
				let _this = this;
				let data = uni.getStorageSync('addressInfo');
				if (data) {
					setTimeout(() => {
						this.provinceList.forEach((ele, ind) => {
							if (ele.regionId == data.consigneeProvinceId) { //判断省
								this.provinceIndex = ind;
								this.provinceId = ele.regionId;
								this.getProvinceList(this.provinceId, 'city');
							}
						})
					}, 800)
					setTimeout(() => {
						this.cityList.forEach((ele, ind) => {
							if (ele.regionId == data.consigneeCityId) { //判断省
								this.cityIndex = ind;
								this.cityId = ele.regionId;
								this.getProvinceList(this.cityId, 'county');
							}
						})
					}, 1600)
					setTimeout(() => {
						this.countyList.forEach((ele, ind) => {
							if (ele.regionId == data.consigneeDistrictId) { //判断省
								this.countyIndex = ind;
								this.countyId = ele.regionId;
							}
						})
					}, 2500)
					_this.userInfo = data;
				}
			},
			//获取城市列表
			getProvinceList(parentId, listType) {
				getRegionListByParentId({
					parentId: parentId
				}).then((res) => {
					let data = res.data;
					if (listType == 'province') { //省
						this.provinceList = data;
						this.cityList = [];
						this.countyList = [];
						this.provinceId = null;
						this.cityId = null;
						this.countyId = null;
						this.provinceIndex = null;
						this.cityIndex = null;
						this.countyIndex = null;
					} else if (listType == 'city') { //市
						this.cityList = data;
						this.countyList = [];
						this.cityId = null;
						this.countyId = null;
						this.cityIndex = null;
						this.countyIndex = null;
					} else if (listType == 'county') { //区
						this.countyList = data;
						this.countyId = null;
						this.countyIndex = null;
					}
				})
			},
			bindRegionChange_province(e) {
				this.provinceIndex = e.detail.value;
				this.provinceId = this.provinceList[this.provinceIndex].regionId;
				this.getProvinceList(this.provinceId, 'city');
			},
			bindRegionChange_city(e) {
				this.cityIndex = e.detail.value;
				this.cityId = this.cityList[this.cityIndex].regionId;
				this.getProvinceList(this.cityId, 'county');
			},
			bindRegionChange_county(e) {
				this.countyIndex = e.detail.value;
				this.countyId = this.countyList[this.countyIndex].regionId;
			},
			formSubmit: function(e) {
				let that = this;
				if (that.provinceId == null) return that.$util.Tips({
					title: '请选择收货地区省份'
				});
				if (that.cityId == null) return that.$util.Tips({
					title: '请选择收货地区市'
				});
				if (that.countyId == null) return that.$util.Tips({
					title: '请选择收货地区区县'
				});
				if (!this.userInfo.detail) return that.$util.Tips({
					title: '请填写详细地址'
				});
				this.userInfo.province=this.provinceList[this.provinceIndex].regionName;//
				this.userInfo.city=this.cityList[this.cityIndex].regionName;//
				this.userInfo.district=this.countyList[this.countyIndex].regionName;//
				
				this.userInfo.consigneeProvinceId=this.provinceList[this.provinceIndex].regionId;//
				this.userInfo.consigneeCityId=this.cityList[this.cityIndex].regionId;//
				this.userInfo.consigneeDistrictId=this.countyList[this.countyIndex].regionId;//
				uni.setStorageSync('addressInfo',this.userInfo);
				uni.navigateTo({
					url: '/pages/users/order_confirm/index_zx?saleType='+this.saleType+'&isAddress=true'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.addAddress .list {
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.addAddress .list .item {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		width: 400rpx;
		font-size: 30rpx;
		text-align: right;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 410rpx;
		height: 42rpx;
	}

	.addAddress .list .item picker .picker {
		width: 350rpx;
		font-size: 30rpx;
		text-align: right;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fe960f;
		border: 1px solid #fe960f;
	}
</style>
